<template>
  <el-dialog
    :append-to-body="true"
    v-model="visible"
    width="366"
    :before-close="handleClose"
    class="close-client-dialog"
    center
  >
    <div class="content">
      <h3>账号资源不足</h3>
      <p>人气太旺，账号资源紧张，稍后再试试看~</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="handleRecharge()">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  gameData: {
    type: Object,
    default: () => ({
      sessionDuration: 0,
      consumedCoins: 0,
    }),
  },
});

// Refs
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

// Emits
const emit = defineEmits(["update:modelValue", "close", "recharge"]);

// Methods
const handleClose = () => {
  emit("close");
  emit("update:modelValue", false);
};

const handleRecharge = () => {
  emit("recharge");
  emit("update:modelValue", false);
};
</script>

<style lang="scss">
.close-client-dialog {
  .el-dialog__header {
    padding: 20px !important;

    .el-dialog__title {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 0 40px;

    h3 {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
    }

    p {
      margin: 20px 0;
      color: #888;
      font-size: 14px;
    }

    .cs-button {
      margin: 10px 0;
    }
  }

  .el-dialog__footer {
    padding-top: 0 !important;
    padding-bottom: 38px;

    .el-button {
      width: 135px;
      height: 50px;
      background: #232527;
      border: #232527;
      color: #e2e2e2;
      font-size: 14px;
      font-weight: bold;

      &.el-button--primary {
        background: #ffe500;
        border-color: #ffe500;
        color: #121212;
      }

      &.el-button--warning {
        background: #d55928;
        border-color: #d55928;
        color: #fff;
      }
    }
  }
}
</style>
